<template>
  <div id="type_container" v-if="contentLoaded">
      <div id="type" class="swiper-container">
          <div class="swiper-wrapper">
               <span v-for="cate in categories" :key="cate.class_id"
                class="type-item swiper-slide" :class="{active: cate.class_id == classId}"
                @click="clickType(cate.class_id)">
                    {{cate.class_name}} 
               </span>
          </div>
      </div>
      <div id="subtype">
          <span class="subtype" v-for="menu in activeCategoryMenus"
            :key="menu.class_append_id" :class="{active: menu.class_append_id == classAppendId}"
            @click="clickSubtype(menu.class_append_id)">
                {{menu.class_name}}
          </span>
          <span v-show="!activeCategoryMenus.length" class="c-txt grey">暂无细分标签</span>
      </div>
  </div>
</template>
<script>
import 'swiper/src/swiper.less'
import Swiper from 'swiper'
import lang from 'lodash/lang'
import { mapGetters, mapActions } from 'vuex'    
export default{
    name: 'GoodsType',
    async created(){
        this.classId = this.$route.params.classId
        await this.getCategories()
        this.contentLoaded = true
        // 初始化swiper ✈
        this.$nextTick(() => {
            new Swiper('#type', {
                spaceBetween: 10,
                slidesPerView: 5,
                freeMode: true
            })
        })
    },
    data(){
        return {
            classId: '',
            classAppendId: '',
            contentLoaded: false
        }
    },
    computed:{
        ...mapGetters({
            categories: 'goods/categories'
        }),
        activeCategoryMenus(){
            const cates = JSON.parse(JSON.stringify(this.categories));
            return cates.find(cate => cate.class_id == this.classId).category_menu || []
        }
    },
    methods: {
        ...mapActions({
            getCategories: 'goods/getCategories'
        }),
        clickType(classId){
            this.classId = classId
            this.classAppendId = ''
            this.$emit('change', {classId: this.classId, classAppendId: this.classAppendId})
        },
        clickSubtype(classAppendId){
            this.classAppendId = classAppendId
            this.$emit('change', {classId: this.classId, classAppendId: this.classAppendId})            
        }
    }
}
</script>
<style lang="less" scoped>
#type_container{
    padding: 0 .4rem;
    background: #fff;
}
#type{
    border-bottom: 2px solid #ddd;
    .type-item{
         color: #323232;
        font-size: 0.35rem;
        line-height: .8rem;
        width: 1rem;
        display: inline-block;
        &.active{
            color: #fb4a4a;
            border-bottom: 2px solid #fb4a4a;
        }
    }
}
#subtype{
    padding-bottom: .2rem;
    width: ~'calc(100% + .4rem)';
    .subtype{
        padding: 0 .3rem;
        border-radius: 0.13rem;
        font-size: 0.35rem;
        color: #323232;
        letter-spacing: 0.49px;
        text-align: center;
        background: #f5f5f5;
        height: 0.7rem;
        line-height: .7rem;
        margin-right: .3rem;
        margin-top: .2rem;
        display: inline-block;
        &.active{
            background: #ffecec;
        }
    }
    .grey{
        height: .7rem;
        line-height: .7rem;
        display: inline-block;
        margin-top: .2rem;
    }
}
</style>
